﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>添加信息</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			font-size:85%;
		}
		.container{
			width: 90%;
			margin-top: 5%;
		}
		.choose{
			color: #6699FF;
		}
		.modal-dialog{
			width:80%;
			margin-top: 10%;
		}
		td{
			width:auto;
		}
		select{
			width:100%;
		}
	</style>
</head>
<body>

	<div class="container">
		<div class="list-group">
		<a href="#" class="list-group-item active">
			<h4 class="list-group-item-heading">
				第一步：选择人员
			</h4>
		</a>
		<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabe2">
							请输入人员姓名查询（支持半模糊查询）
						</h4>
						<div class="input-group">
							<input type="text" class="form-control" id="staffName" autofocus="autofocus">
							<span class="input-group-btn">
								<button class="btn btn-default" type="button" onclick="searchStaff()">
									查询
								</button>
							</span>
						</div>
					</div>
					
					
					
					<div class="modal-body">
						<form id="searchStaff">
							<table class="table table-striped table-bordered table-hover table-condensed">
								<thead>
									<tr>	
										<th>人员编号</th>
										<th>姓名</th>
										<th>身份证号</th>
										<th>性别</th>
										<th>民族</th>
										<th>政治面貌</th>
										<th>学院/部门</th>
										<th>学历</th>
										<th>联系方式</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="tabledata">
									<tr style="display:none">
										<td id="moban"> <span class="glyphicon glyphicon-ok choose" onclick="seaarchPassPort(this)" 
											data-toggle="modal" data-target="#myModal3">选择</span></td>
									</tr>
								</tbody>
							</table>
						</form>
						
						<div id="idonkonw">
							<h4 class="modal-title" id="myModalLabel333">
								
							</h4>
						</div>
						<h4 class="modal-title" id="myModalLabel222" style="display: none;">
							请选择待修改证件：
							
						</h4>
						
					</div>
					
				</div><!-- /.modal-content -->
	</div>
	
	
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabe6">
					</h4>
					<div class="input-group">
					<input type="text" id="sname" class="form-control" disabled="disabled">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button" data-dismiss="modal">
							重选
						</button>
					</span>
				</div>
				</div>
				<div class="modal-body">
					<table class="table table-striped table-bordered table-hover table-condensed">
						<thead>
							<tr>
								<th>证件号</th>
								<th>证件类型</th>
								<th>发证日期</th>
								<th>有效期</th>
								<th>上交证件日期</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td id="pid" contentEditable="true" onblur="changeValue(this,0)"></td>
								<td>
									<select  id="kind" onchange="changeoption(this)">
									  <option id="opop" selected="selected">请选择</option>
									  <option value ="volvo">身份证</option>
									  <option value ="saab">公务护照</option>
									  <option value ="saab">因私护照</option>
									  <option value="opel">因公港澳通行证</option>
									  <option value="audi">因私台湾通行证</option>
									  <option value="opel">因私港澳通行证</option>
									  <option value="audi">因公台湾通行证</option>							
									</select>
								</td>
								<td id="startdate" contentEditable="true" onblur="changeValue(this,3)"></td>
								<td id="enddate" contentEditable="true" onblur="changeValue(this,4)"></td>
								<td id="returndate" contentEditable="true" onblur="changeValue(this,5)"></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" id="canceled" class="btn btn-primary cancel" data-dismiss="modal">
						取消
					</button>
					<button type="button" class="btn btn-primary" onclick="xiugai()">
						确定修改
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	
	<center>
		<a href="index.html"><button type="button" class="btn btn-info">返回首页</button></a>
	</center>
	
</div>
	

</body>

<script>
var pid;
var pdata = [];
var preid = [];
var index;
function searchStaff(){//$("#testform").serialize() 
	$.post("getStaff.do", "name="+$("#staffName").val(),function(data){
		var list = document.getElementsByClassName("staffmsglist");
		var p = document.getElementById("tabledata");
		for(var k=list.length-1;k>=0;k--) p.removeChild(list[k]);
		var res = data.split("\u0001");
			for(var i=0;i<res.length-1;i++){
					var caozuo = document.getElementById("moban").cloneNode(true);
					var tr = document.createElement("tr");
					tr.setAttribute("class","staffmsglist choose");
					var str = res[i].split("\u0005");
					for(var j=0;j<str.length;j++){
						var td = document.createElement("td");
						td.innerHTML = str[j];
						tr.appendChild(td);
					}
				tr.setAttribute("dataofid",str[0]);
				tr.setAttribute("sname",str[1]);
				tr.setAttribute("onclick","seaarchPassPort(this)");
				tr.appendChild(caozuo);
				p.appendChild(tr);
		}
	},"text");

}
function changeColor(node){
	var ch = document.getElementsByClassName("choose");
	for(var i=0;i<ch.length;i++) ch[i].style.backgroundColor = "";
	node.style.backgroundColor = "#66CC66";
}

function setPid(node){
	pid = node.getAttribute("pid");
	index = node.getAttribute("index");
	$("#pid").text(pdata[index][0]);
	$("#opop").text(pdata[index][2]);
	$("#startdate").text(pdata[index][3]);
	$("#enddate").text(pdata[index][4]);
	$("#returndate").text(pdata[index][5]);
	document.getElementById("sname").value = sname;
	
	
}

function seaarchPassPort(node){
	changeColor(node);
	if(node!=-1){
		sid = node.getAttribute("dataofid");
		sname = node.getAttribute("sname");
	}
	var p = document.getElementById("idonkonw");
	var child = document.getElementById("myModalLabel333");
	p.removeChild(child);
	var m = document.getElementById("myModalLabel222").cloneNode(true);
	m.setAttribute("id","myModalLabel333");
	m.style.display = "inline";
	p.appendChild(m);
	$.post("getPassPort.do", "sid="+sid,function(data){
		data = data.replace(/无/g,"");
		var res = data.split("\u0001");
		for(var i=0;i<res.length-1;i++){
			var str = res[i].split("\u0005");
			pdata[i] = str;
			preid[i] = str[0];
			var n = document.createElement("button");
			n.setAttribute("type","button");
			n.setAttribute("class","btn btn-default passport");
			n.setAttribute("data-toggle","modal");
			n.setAttribute("data-target","#myModal2");
			n.setAttribute("index",i);
			n.setAttribute("onclick","setPid(this)");
			n.innerHTML = str[2];
			document.getElementById("myModalLabel333").appendChild(n);
		}
	},"text");
}

function datematch(date){
	var reg = /[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
	var regExp = new RegExp(reg);
	if(!regExp.test(date)){
		alert("日期格式不正确！正确格式为：2015-01-01");
		return false;
	}
	else return true;      
}

function changeoption(node){
	var x=node.selectedIndex;
	var d = node.options[x].text;
	pdata[index][2] = d;
}
function changeValue(node,i){
	if(i!=0) 
		if(!datematch(node.innerHTML)){
			node.innerHTML = "";
			return;
		}
	pdata[index][i]=node.innerHTML;
}
function trim(str){
	return str.replace(/(^\s+)|(\s+$)/g,"");
} 
function xiugai(){
	if(pdata[index][3]=="" || pdata[index][4]==""){
		alert("发证时间和到期时间不能为空！");
		return;
	}
	pdata[index][3] = trim(pdata[index][3]);
	pdata[index][4] = trim(pdata[index][4]);
	pdata[index][5] = trim(pdata[index][5]);
	if(!datematch(pdata[index][3]) || !datematch(pdata[index][4])) return;
	var parm = "sid="+pdata[index][1]+"&pid="+pdata[index][0]+"&kind="+pdata[index][2]+"&preid="+preid[index];
	parm+="&startdate="+pdata[index][3]+"&enddate="+pdata[index][4]+"&returndate="+pdata[index][5];
	parm = parm.replace(/<br>/g,"");
	$.post("modifyPassPort.do",parm,function(data){
		alert("修改成功");
		document.getElementById("canceled").click();
	});
}

</script>
</html>